import * as React from 'react';
import { Input, Col } from 'antd';
import './Input';
interface Props extends React.Props<any> {
  label?: string;
  value?: string;
  error?: string;
  col?: number;
  disabled?: boolean;
  allowClear?: boolean;
  required?: boolean;
  modelKey: string;
  placeholder?: string;
  onChange?: (e: string, key: string) => void;
}
export class SInput extends React.PureComponent<Props, any> {
  public static defaultProps: Props = {
    label: '',
    col: 24,
    modelKey: '',
    disabled: false,
    allowClear: false,
    required: false,
  }
  render() {
    const { label, col, disabled, allowClear, required, error, modelKey, value, placeholder } = this.props;
    return (
      <div className='input s-input smart-form'>
        <Col span={col}>
          {
            label ?
            <label className='label'>
              <span>{label}</span>
              {required ? <i className='required'>*</i> : null}
            </label> : null
          }
          <div className={error ? 'form-error' : ''}>
            <Input
              disabled={disabled}
              allowClear={allowClear}
              value={value}
              placeholder={placeholder}
              onChange={e => this.props.onChange!(e.target.value, modelKey)}
            />
          </div>
          <em className='note-error'>{error}</em>
        </Col>
      </div>
    )
  }
}